<template>
<div class="couriers-page">
<div class="toolbar card">
<el-input v-model="filterName" placeholder="搜索配送员姓名" clearable
prefix-icon="el-icon-search" @clear="onFilter" @keyup.enter="onFilter"/>
<el-button v-ripple type="primary" icon="el-icon-plus" @click="openDialog('add')">新增配送员</el-button>
</div>
<el-table :data="pagedList" stripe highlight-current-row class="card">
<el-table-column prop="id" label="ID" width="60"/>
<el-table-column prop="name" label="姓名"/>
<el-table-column prop="phone" label="手机号"/>
<el-table-column prop="vehicle" label="工具"/>
<el-table-column label="操作" width="180">
<template slot-scope="{row}">
<el-button size="mini" @click="openDialog('edit',row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteCourier(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next"
:total="filtered.length" :page-size="pageSize"
:current-page.sync="page" @current-change="onPageChange"
class="pagination"/>
<el-dialog :title="dialogMode==='add'?'新增配送员':'编辑配送员'"
:visible.sync="dialogVisible" width="400px">
<el-form :model="form" label-width="80px">
<el-form-item label="姓名"><el-input v-model="form.name"/></el-form-item>
<el-form-item label="手机号"><el-input v-model="form.phone"/></el-form-item>
<el-form-item label="工具"><el-input v-model="form.vehicle"/></el-form-item>
</el-form>
<span slot="footer"><el-button @click="onCancel">取消</el-button><el-button type="primary" @click="onSave">保存</el-button></span>
</el-dialog>
</div>
</template>

<script>
export default {
data(){return{
list:[
{id:1,name:'王小明',phone:'13700000001',vehicle:'电动车'},
{id:2,name:'李小红',phone:'13800000001',vehicle:'自行车'},
{id:3,name:'陈小刚',phone:'13900000001',vehicle:'电动车'},
{id:4,name:'张霞',phone:'13000000001',vehicle:'电动车'}
],
filterName:'',page:1,pageSize:5,
dialogVisible:false,dialogMode:'add',
form:{id:null,name:'',phone:'',vehicle:''}
}},
computed:{
filtered(){ if(!this.filterName) return this.list;const kw=this.filterName.toLowerCase();return this.list.filter(c=>c.name.toLowerCase().includes(kw)) },
pagedList(){const s=(this.page-1)*this.pageSize;return this.filtered.slice(s,s+this.pageSize)}
},
methods:{
onFilter(){this.page=1},
onPageChange(p){this.page=p},
openDialog(m,r){this.dialogMode=m;this.form=m==='edit'?{...r}:{id:null,name:'',phone:'',vehicle:''};this.dialogVisible=true},
onCancel(){this.dialogVisible=false},
onSave(){
if(!this.form.name||!this.form.phone){this.$message.warning('请填写姓名和手机号');return}
if(this.dialogMode==='add'){const id=this.list.length?Math.max(...this.list.map(i=>i.id))+1:1;this.list.push({...this.form,id});this.$message.success('新增成功')}
else{const idx=this.list.findIndex(i=>i.id===this.form.id);this.$set(this.list,idx,{...this.form});this.$message.success('编辑成功')}
this.dialogVisible=false
},
deleteCourier(id){this.$confirm('确认删除？','提示',{type:'warning'}).then(()=>{this.list=this.list.filter(i=>i.id!==id);this.$message.success('删除成功')}).catch(()=>{})}
}
}
</script>

<style scoped>
@import '@/assets/theme.css';
.couriers-page .toolbar{display:flex;gap:10px;align-items:center;padding:12px;border-radius:8px;box-shadow:0 2px 8px var(--color-card-shadow);background:var(--color-card-bg);margin-bottom:20px;}
.card{background:var(--color-card-bg);border-radius:8px;box-shadow:0 4px 12px var(--color-card-shadow);margin-top:20px;}
.pagination{margin-top:20px;text-align:right;}
</style>